<template>
  <div class='ele-body ele-body-card'>
    <a-card title="开关"
            :bordered='true'
            :body-style="{padding: '20px'}">
      <a-descriptions bordered :column="2" layout="vertical">
        <a-descriptions-item label="加热开关">
          <a-descriptions bordered :column="1">
            <a-descriptions-item :label="((sink.switchStatus & 1)  == 1 ? '状态：开' : '状态：关')">
              <a-button type="primary" @click="addTemOpen" :loading='addTemOpenLoading'>打开</a-button>
              <a-button type="danger" style="margin-left: 20px;" @click="addTemClose" :loading='addTemCloseLoading'>关闭</a-button>
            </a-descriptions-item>
          </a-descriptions>
        </a-descriptions-item>
        <a-descriptions-item label="加水开关">
          <a-descriptions bordered :column="1">
            <a-descriptions-item :label="(((sink.switchStatus >> 1) & 1) == 1 ? '状态：开' : '状态：关')">
              <a-button type="primary" @click="addWaterOpen" :loading='addWaterOpenLoading'>打开</a-button>
              <a-button type="danger" style="margin-left: 20px;" @click="addWaterClose" :loading='addWaterCloseLoading'>关闭</a-button>
            </a-descriptions-item>
          </a-descriptions>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-row>
      <a-col :span="12" class="block-space-right">
        <a-card title="自动加热任务"
                :bordered='true'
                :body-style="{padding: '20px'}">
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="运行状态">{{sink.addTemperatureStatus == 1 ? '运行' : '停止'}}</a-descriptions-item>
            <a-descriptions-item label="设定加热温度">{{sinkConfig.wantto_temperature ? sinkConfig.wantto_temperature : 0}} (摄氏度℃)</a-descriptions-item>
            <a-descriptions-item label="设定加热时间">{{sinkConfig.wantto_temperature_time ? sinkConfig.wantto_temperature_time : 0}} (秒)</a-descriptions-item>
            <a-descriptions-item label="剩余时间">{{sink.addTemperatureRemaintime ? sink.addTemperatureRemaintime : 0}}(秒)</a-descriptions-item>
          </a-descriptions>

          <a-card :body-style="{padding: '5px'}">
            <a-form
              ref='sinkTemperatureTaskFormRef'
              :label-col='{ md: { span: 12 }, sm: { span: 24 } }'
              :wrapper-col='{ md: { span: 12 }, sm: { span: 24 } }'
            >
              <a-row :gutter="8">
                <a-col :md='12' :sm='24' :xs='24' >
                  <a-form-item label='设定温度(℃):' name='wanttoTemperature'>
                    <a-input v-model:value='temperatureTaskForm.wantto_temperature' placeholder='单位摄氏度' allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md='12' :sm='24' :xs='24'/>
              </a-row>
              <a-row :gutter="8">
                <a-col :md='12' :sm='24' :xs='24' >
                  <a-form-item label='设定加热时间(秒):' name='wanttoTemperatureTime'>
                    <a-input v-model:value='temperatureTaskForm.wantto_temperature_time' placeholder='单位:秒' allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md='12' :sm='24' :xs='24'/>
              </a-row>
              <a-row :gutter="8">
                <a-col :md='4' :sm='24' :xs='24'>
                  <a-button type='primary' @click="enableAddTemperature" :loading='enableAddTemperatureLoading'>启动</a-button>
                </a-col>
                <a-col :md='4' :sm='24' :xs='24'>
                  <a-button type='primary' @click="disableAddTemperature" danger :loading='disableAddTemperatureLoading'>停止</a-button>
                </a-col>
                <a-col :md='16' :sm='24' :xs='24'/>
              </a-row>
            </a-form>
          </a-card>
        </a-card>
      </a-col>

      <a-col :span="12" class="block-space-right">
        <a-card title="自动加水任务"
                :bordered='true'
                :body-style="{padding: '20px'}">
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="运行状态">{{sink.addWaterStatus == 1 ? '运行' : '停止'}}</a-descriptions-item>
            <a-descriptions-item label="设定加水水位">{{sinkConfig.wantto_waterlevel}}</a-descriptions-item>
            <a-descriptions-item label="设定加水时间">{{sinkConfig.wantto_water_time ? sinkConfig.wantto_water_time : 0}}(秒)</a-descriptions-item>
            <a-descriptions-item label="剩余时间">{{sink.addWaterRemaintime ? sink.addWaterRemaintime : 0}}(秒)</a-descriptions-item>
          </a-descriptions>

          <a-card :body-style="{padding: '5px'}">
            <a-form
              ref='sinkTemperatureTaskFormRef'
              :label-col='{ md: { span: 12 }, sm: { span: 24 } }'
              :wrapper-col='{ md: { span: 12 }, sm: { span: 24 } }'
            >
              <a-row :gutter="8">
                <a-col :md='12' :sm='24' :xs='24' >
                  <a-form-item label='设定水位:' name='wanttoWaterlevel'>
                    <a-input v-model:value='waterTaskForm.wantto_waterlevel' placeholder='请输入水位' allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md='12' :sm='24' :xs='24'/>
              </a-row>
              <a-row :gutter="8">
                <a-col :md='12' :sm='24' :xs='24' >
                  <a-form-item label='设定加水时间(秒):' name='wanttoWaterTime'>
                    <a-input v-model:value='waterTaskForm.wantto_water_time' placeholder='单位:秒' allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md='12' :sm='24' :xs='24'/>
              </a-row>
              <a-row :gutter="8">
                <a-col :md='4' :sm='24' :xs='24'>
                  <a-button type='primary' @click="enableAddWater" :loading='enableAddWaterLoading'>启动</a-button>
                </a-col>
                <a-col :md='4' :sm='24' :xs='24'>
                  <a-button type='primary' @click="disableAddWater" danger :loading='disableAddWaterLoading'>停止</a-button>
                </a-col>
                <a-col :md='16' :sm='24' :xs='24'/>
              </a-row>
            </a-form>
          </a-card>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {DeviceCommandDownQueueApi} from '@/api/property/DeviceCommandDownQueueApi';
import {DeviceSinkApi} from '@/api/property/DeviceSinkApi';
import { message } from 'ant-design-vue';

export default {
  name: 'DeviceSinkControlPanel',
  components: {
  },
  props: {
    data: Object
  },
  async created() {
    await this.init();
    this.loadDetailTimer = setInterval(this.getDetail, 10000);
  },
  data() {
    return {
      loadDetailTimer : undefined,
      loading : false,
      sink : {},
      sinkConfig : {},
      addTemOpenLoading : false,
      addTemCloseLoading : false,
      addWaterOpenLoading : false,
      addWaterCloseLoading : false,

      addTemOpenTimer : undefined,
      addTemCloseTimer : undefined,
      addWaterOpenTimer : undefined,
      addWaterCloseTimer : undefined,
      //加温任务
      temperatureTaskForm : {},
      enableAddTemperatureLoading : false,
      enableAddTemperatureTimer : undefined,
      disableAddTemperatureLoading : false,
      disableAddTemperatureTimer : undefined,
      //加水任务
      waterTaskForm : {},
      enableAddWaterLoading : false,
      enableAddWaterTimer : undefined,
      disableAddWaterLoading : false,
      disableAddWaterTimer : undefined
    };
  },
  methods: {
    getDetail() {
      let that = this;
      DeviceSinkApi.detailByRecord(this.data.recordId).then(result => {
        let sink = result || {};
        that.sink = sink;
        if (sink.currentConfig != undefined && sink.currentConfig != "") {
          that.sinkConfig = JSON.parse(sink.currentConfig);
        } else {
          that.sinkConfig = {};
        }
      });
    },
    async init() {
      this.getDetail();
    },
    //检查队列设置情况
    checkProcess(dictate, clearCallback, callback) {
      let params = {
        recordId: this.data.recordId,
        sceneDictate: dictate
      };
      let that = this;
      let result = DeviceCommandDownQueueApi.workingDetail(params);
      result
        .then(result => {
          if (!result || !result.dcdqId) { //处理完成了

            clearCallback && clearCallback(); //去掉菊花+清除循环调用
            callback && callback(); //用户自定义
            that.loadDetailTimer = setInterval(that.getDetail, 10000);
          }
        })
        .catch(() => {
          clearCallback && clearCallback(); //去掉菊花+清除循环调用
        });
    },
    //===============begin 打开通道1：温度==============
    addTemOpen() {
      this.loading = true;
      let updateDataRecord = {
        recordId: this.data.recordId,
        templateCode: 'watertank',
        sceneDictate : 9991,
        updateData: '',
        dictate : 9991 //打开通道1：温度
      };
      clearInterval(this.loadDetailTimer);
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.addTemOpenLoading = true; //转圈
          this.addTemOpenTimer = setInterval(this.checkAddTemOpen, 10000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkAddTemOpen(){
      let that = this;
      this.checkProcess(9991, this.clearAddTemOpenEnv, function(){
        that.getDetail();
      });
    },
    clearAddTemOpenEnv(){
      this.addTemOpenLoading = false;
      clearInterval(this.addTemOpenTimer);
    },
    //===============end 打开通道1：温度==============

    //===============begin 关闭通道1：温度==============
    addTemClose() {
      this.loading = true;
      let updateDataRecord = {
        recordId: this.data.recordId,
        updateData: '',
        templateCode: 'watertank',
        sceneDictate : 9992,
        dictate : 9992 //打开通道1：温度
      };
      clearInterval(this.loadDetailTimer);
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.addTemCloseLoading = true; //转圈
          this.addTemCloseTimer = setInterval(this.checkAddTemClose, 10000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkAddTemClose(){
      let that = this;
      this.checkProcess(9992, this.clearAddTemCloseEnv, function(){
        that.getDetail();
      });
    },
    clearAddTemCloseEnv(){
      this.addTemCloseLoading = false;
      clearInterval(this.addTemCloseTimer);
    },
    //===============end 关闭通道1：温度==============


    //===============begin 打开通道2：加水开关==============
    addWaterOpen() {
      this.loading = true;
      let updateDataRecord = {
        recordId: this.data.recordId,
        templateCode: 'watertank',
        sceneDictate : 9993,
        updateData: '',
        dictate : 9993 //打开通道1：温度
      };
      clearInterval(this.loadDetailTimer);
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.addWaterOpenLoading = true; //转圈
          this.addWaterOpenTimer = setInterval(this.checkAddWaterOpen, 10000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkAddWaterOpen(){
      let that = this;
      this.checkProcess(9993, this.clearAddWaterOpenEnv, function(){
        that.getDetail();
      });
    },
    clearAddWaterOpenEnv(){
      this.addWaterOpenLoading = false;
      clearInterval(this.addWaterOpenTimer);
    },
    //===============end 打开通道2：加水开关==============


    //===============begin 打开通道2：加水开关==============
    addWaterClose() {
      this.loading = true;
      let updateDataRecord = {
        recordId: this.data.recordId,
        templateCode: 'watertank',
        sceneDictate : 9994, //打开通道1：温度
        updateData: '',
        dictate : 9994
      };
      clearInterval(this.loadDetailTimer);
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.addWaterCloseLoading = true; //转圈
          this.addWaterCloseTimer = setInterval(this.checkAddWaterClose, 10000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkAddWaterClose(){
      let that = this;
      this.checkProcess(9994, this.clearAddWaterCloseEnv, function(){
        that.getDetail();
      });
    },
    clearAddWaterCloseEnv(){
      this.addWaterCloseLoading = false;
      clearInterval(this.addWaterCloseTimer);
    },
    //===============end 打开通道2：加水开关=============='


    //===============begin 加热任务-开启 ==============
    enableAddTemperature() {
      this.loading = true;
      let updateParams = this.temperatureTaskForm;
      updateParams.enable_add_temperature = 2;
      let updateDataRecord = {
        recordId: this.data.recordId,
        templateCode: 'watertank',
        sceneDictate : 8,
        updateData: JSON.stringify({ old: this.sinkConfig, update: updateParams}),
        dictate : 8 //打开通道1：温度
      };
      clearInterval(this.loadDetailTimer);
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.enableAddTemperatureLoading = true; //转圈
          this.enableAddTemperatureTimer = setInterval(this.checkEnableAddTemperature, 10000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkEnableAddTemperature(){
      let that = this;
      this.checkProcess(8, this.clearEnableAddTemperatureEnv, function(){
        that.getDetail();
        that.temperatureTaskForm = {};
      });
    },
    clearEnableAddTemperatureEnv(){
      this.enableAddTemperatureLoading = false;
      clearInterval(this.enableAddTemperatureTimer);
    },
    //===============end 加热任务-开启=============='

    //===============begin 加热任务-停止 ==============
    disableAddTemperature() {
      this.loading = true;
      let updateParams = this.temperatureTaskForm;
      updateParams.enable_add_temperature = 1;
      let updateDataRecord = {
        recordId: this.data.recordId,
        templateCode: 'watertank',
        sceneDictate : 8,
        updateData: JSON.stringify({ old: this.sinkConfig, update: updateParams}),
        dictate : 8 //打开通道1：温度
      };
      clearInterval(this.loadDetailTimer);
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.disableAddTemperatureLoading = true; //转圈
          this.disableAddTemperatureTimer = setInterval(this.checkDisableAddTemperature, 10000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkDisableAddTemperature(){
      let that = this;
      this.checkProcess(8, this.clearDisableAddTemperatureEnv, function(){
        that.getDetail();
        that.temperatureTaskForm = {};
      });
    },
    clearDisableAddTemperatureEnv(){
      this.disableAddTemperatureLoading = false;
      clearInterval(this.disableAddTemperatureTimer);
    },
    //===============end 加热任务-停止=============='


    //===============begin 加水任务-开始 ==============
    enableAddWater() {
      this.loading = true;
      let updateParams = this.waterTaskForm;
      updateParams.enable_add_water = 2;
      let updateDataRecord = {
        recordId: this.data.recordId,
        templateCode: 'watertank',
        sceneDictate : 9,
        updateData: JSON.stringify({ old: this.sinkConfig, update: updateParams}),
        dictate : 9
      };
      clearInterval(this.loadDetailTimer);
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.enableAddWaterLoading = true; //转圈
          this.enableAddWaterTimer = setInterval(this.checkEnableAddWater, 10000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkEnableAddWater(){
      let that = this;
      this.checkProcess(9, this.clearEnableAddWaterEnv, function(){
        that.getDetail();
        that.waterTaskForm = {};
      });
    },
    clearEnableAddWaterEnv(){
      this.enableAddWaterLoading = false;
      clearInterval(this.enableAddWaterTimer);
    },
    //===============end 加水任务-开始=============='

    //===============begin 加水任务-结束 ==============
    disableAddWater() {
      this.loading = true;
      let updateParams = this.waterTaskForm;
      updateParams.enable_add_water = 1;
      let updateDataRecord = {
        recordId: this.data.recordId,
        templateCode: 'watertank',
        sceneDictate : 9,
        updateData: JSON.stringify({ old: this.sinkConfig, update: updateParams}),
        dictate : 9
      };
      clearInterval(this.loadDetailTimer);
      let result = DeviceCommandDownQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.disableAddWaterLoading = true; //转圈
          this.disableAddWaterTimer = setInterval(this.checkDisableAddWater, 10000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    checkDisableAddWater(){
      let that = this;
      this.checkProcess(9, this.clearDisableAddWaterEnv, function(){
        that.getDetail();
        that.waterTaskForm = {};
      });
    },
    clearDisableAddWaterEnv(){
      this.disableAddWaterLoading = false;
      clearInterval(this.disableAddWaterTimer);
    },
    //===============end 加水任务-停止=============='


  }
};
</script>
<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}
</style>
